<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>工艺巡检登记</title>
    <link rel="icon" type="image/x-icon" href="img/icon.ico" />
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
    <style type="text/css">
        .site-doc-icon li{width: 222px;}
        .site-doc-icon li .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
    </style>
</head>
<body>
<!-- 
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	    <legend>离心机示例图</legend>
	</fieldset> 
-->
<!-- <table class="layui-hide" id="tableList" lay-filter="tableList"></table> -->
<ul class="site-doc-icon site-doc-anim">
    <li>
    	<br><hr class="layui-bg-orange" style="width: 700px">离心机示例图
    	<input class="layui-hide" id="hideVal" name="hideVal">
   		<div class="layui-anim" data-anim="layui-anim-rotate" style="margin-top: 50px;" onclick="lookupStatusInfo(1)">1#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 220px; margin-top: -160px" onclick="lookupStatusInfo(2)">2#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 400px; margin-top: -160px" onclick="lookupStatusInfo(3)">3#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 600px; margin-top: -160px" onclick="lookupStatusInfo(4)">4#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 800px; margin-top: -160px" onclick="lookupStatusInfo(5)">5#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 1000px; margin-top: -160px" onclick="lookupStatusInfo(6)">6#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 1200px; margin-top: -160px" onclick="lookupStatusInfo(7)">7#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 1400px; margin-top: -160px" onclick="lookupStatusInfo(8)">8#离心机</div>
        
   		<div class="layui-anim" data-anim="layui-anim-rotate" style="margin-top: 50px; margin-bottom: 50px" onclick="lookupStatusInfo(9)">9#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 220px; margin-top: -200px" onclick="lookupStatusInfo(10)">10#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 400px; margin-top: -200px" onclick="lookupStatusInfo(11)">11#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 600px; margin-top: -200px" onclick="lookupStatusInfo(12)">12#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 800px; margin-top: -200px" onclick="lookupStatusInfo(13)">13#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 1000px; margin-top: -200px" onclick="lookupStatusInfo(14)">14#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 1200px; margin-top: -200px" onclick="lookupStatusInfo(15)">15#离心机</div>
        <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; margin-left: 1400px; margin-top: -200px" onclick="lookupStatusInfo(16)">16#离心机</div>

        <hr class="layui-bg-orange" style="width: 700px">1#纺丝车间示意图
        <%--
            <canvas width="250" height="170" id="myCanvas01" style="margin-top: 10px" onclick="lookupShopInfo(21)"></canvas>
            <canvas width="250" height="170" id="myCanvas02" style="margin-top: -220px; margin-left: 300px" onclick="lookupShopInfo(22)"></canvas>
        --%>
        <table style="margin-top: 10px">
            <tr>
                <td>
                    <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; background: orange; margin-left: 34px" onclick="lookupShopInfo1(21)">1#热法纺丝线</div>
                </td>
                <td>
                    <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; background: orange; margin-left: 34px" onclick="lookupShopInfo1(22)">2#热法纺丝线</div>
                </td>
                <td>
                    <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; background: orange; margin-left: 34px" onclick="lookupShopInfo1(23)">3#热法纺丝线</div>
                </td>
                <td>
                    <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; background: orange; margin-left: 34px" onclick="lookupShopInfo1(24)">4#热法纺丝线</div>
                </td>
            </tr>
        </table>

        <hr class="layui-bg-orange" style="width: 700px">2#纺丝车间示意图

        <table style="margin-top: 10px">
            <tr>
                <td>
                    <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; background: dodgerblue; margin-left: 34px" onclick="lookupShopInfo2(31)">1#湿法纺丝线</div>
                </td>
                <td>
                    <div class="layui-anim" data-anim="layui-anim-rotate" style="float: left; background: dodgerblue; margin-left: 34px" onclick="lookupShopInfo2(32)">2#湿法纺丝线</div>
                </td>
            </tr>
        </table>
    </li>
</ul>
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>
<script type="text/html" id="rowToolbar">
	<a class="layui-btn layui-btn-xs" lay-event="record">新增巡检记录</a>
</script>
<script type="text/javascript">
layui.use(['table','layer','upload','form','laydate'], function(){
	var table = layui.table;
	var layer = layui.layer;
    var form = layui.form;
    var $ = layui.$;
    //演示动画
    $('.site-doc-icon .layui-anim').on('click', function(){
        var othis = $(this), anim = othis.data('anim');
        //停止循环
        if(othis.hasClass('layui-anim-loop')){
            return othis.removeClass(anim);
        }
        othis.removeClass(anim);
        setTimeout(function(){
            othis.addClass(anim);
        });
        //恢复渐隐
        if(anim === 'layui-anim-fadeout'){
            setTimeout(function(){
                othis.removeClass(anim);
            }, 1300);
        }
        
        /**
         * 标准值页面表单校验
         */
        form.verify({
            //value：表单的值item：表单的DOM对象
            standardVal: function(value, item){
                if(value == ''){
                    return '标准值不能为空';
                }
            },
            actualVal: function(value, item){
                if(value == ''){
                    return '实际值不能为空';
                }
            },
            handleWay: function(value, item){
                if(value == ''){
                    return '处理意见不能为空';
                }
            }
        });
    });
    
  	//监听行工具事件
	table.on('tool(tableList)', function(obj) {
		//alert(obj.data.processItemName)
		//巡检记录
		if(obj.event === 'record') {
			layer.open({
				type: 1 					//Page层类型
			  	,area: ['500px', '320px']	//宽  高
			  	,title: '工艺巡检记录'
			  	,shade: 0.6 				//遮罩透明度
			  	,maxmin: true 				//允许全屏最小化
			  	,anim: 1 					//0-6的动画形式，-1不开启
			  	,content: '<form class="layui-form" id="addFormID">'+
							'<input class="layui-hide" id="d_s_id" name="d_s_id" value="'+$("#hideVal").val()+'">'+
							'<input class="layui-hide" id="processItemName" name="processItemName" value="'+obj.data.processItemName+'">'+
							'<label class="layui-form-label left-label" style="margin-top: 15px">标准值</label><input class="layui-input" id="standardVal" name="standardVal" value="'+obj.data.standardValuePre+'~'+obj.data.standardValueEnd+'" readonly lay-verify="standardVal" style="width:300px; margin-top:15px; display: inline;">' +
                                '<div class="layui-inline" style="margin-top: 5px;">'+
                                    '<font style="color:red; font-size: 24px; margin-left: 4px">*</font>'+
                                '</div>'+
                            '<br>'+
							'<label class="layui-form-label left-label" style="margin-top: 14px">实际值</label><input class="layui-input" id="actualVal" name="actualVal" lay-verify="actualVal" style="width:300px; margin-top:15px; display: inline;">' +
                                '<div class="layui-inline" style="margin-top: 5px;">'+
                                    '<font style="color:red; font-size: 24px; margin-left: 4px">*</font>'+
                                '</div>'+
                            '<br>'+
							'<label class="layui-form-label left-label" style="margin-top: 14px">处理意见</label><input class="layui-input" id="handleWay;" name="handleWay" lay-verify="handleWay" style="width:300px; margin-top:15px"><br>'+
							'<button class="layui-btn layui-btn-blue" id="subBtn" lay-submit lay-filter="addForm" style="margin-left:160px; margin-bottom: 20px">提交</button>&emsp;&emsp;&emsp;&emsp;'+
							'<button type="reset" class="layui-btn layui-btn-primary" style="margin-bottom: 20px">重置</button>'+
						  '</form>'
			});
		}
	});
  	
	/**
     * 通用表单提交(AJAX方式)(新增组件浇铸离心机巡检记录和纺丝车间实时状态登记)
     */
    form.on('submit(addForm)', function (data) {
    	$("#subBtn").attr("disabled",true);
    	//alert("新增记录");
    	$.ajax({
			url : '${pageContext.request.contextPath}/processItem/addActualTimeInfo.do',
            data: $("#addFormID").serialize(),
			cache : false,
			type : "post",
			}).done(
				function(res) {
					if (res > 0) {
                        toastrStyle();
                        toastr.success('登记成功！');
						setTimeout(function(){
							location.reload();
                        },1000);
					}
				}
			).fail(
				function(res) {
                    toastrStyle();
                    toastr.error('登记失败！');
                    setTimeout(function(){
						location.reload();
                    },1000);
				}
			)
			return false;
    });
});

//组件浇铸离心机实时状态登记
function lookupStatusInfo(deviceFlagNo) {
	$("#hideVal").val(deviceFlagNo);
	//alert('您点击了'+deviceFlagNo+'号离心机');
	/* —————————————————————————————————— */
	layui.use(['table','layer','upload','form','laydate'], function(){
		var table = layui.table;
		var layer = layui.layer;
	    layer.open({
	        type: 1 					//Page层类型
	        ,area: ['500px', '450px']   //宽  高
	        ,title: deviceFlagNo+' 号离心机巡检项'
	        ,shade: 0.6 				//遮罩透明度
	        ,maxmin: true 			    //允许全屏最小化
	        ,anim: 1 					//0-6的动画形式，-1不开启
	        ,content: '<table class="layui-hide" id="tableList" lay-filter="tableList"></table>'
	        /* ,content: $('#tableList') */
	        ,success: function(){
	            layui.use(['table'], function() {
	                var table = layui.table;
	                table.render({
	                    elem: '#tableList'
	                    ,url:'${pageContext.request.contextPath }/processItem/queryProcessItemFlag1.do'
	                    /*,where:{dId:thisRowId.id}*/
	                    /*,toolbar: '#toolbar'*/
	                    ,title: '维护维修项详细'
	                    ,id :'contenttable'
	                    ,limits:[10,20,30]
	                    ,cols: [[
	                        /*{type: 'checkbox', fixed: 'left'},*/
	                        {field:'', title:'序号', sort: true, type:'numbers', width: 60},
	                        {field:'processItemName', title:'工艺巡检项', align: 'center'},
	                        {fixed: 'right', title:'操作', toolbar: '#rowToolbar', align: 'center', width: 180}
	                    ]]
	                    ,page: false
	                });
	            });
	        }
	    });
	});
}

//1#纺丝车间实时状态登记
function lookupShopInfo1(shopFlagNo) {
	$("#hideVal").val(shopFlagNo);
	//alert('您点击了'+deviceFlagNo+'号离心机');
	/* —————————————————————————————————— */
	layui.use(['table','layer','upload','form','laydate'], function(){
        if (shopFlagNo == '21') {
            shopFlagNo = '1'
        } else if (shopFlagNo == '22') {
            shopFlagNo = '2'
        } else if (shopFlagNo == '23') {
            shopFlagNo = '3'
        } else {
            shopFlagNo = '4'
        }
		var layer = layui.layer;
	    layer.open({
	        type: 1 					//Page层类型
	        ,area: ['500px', '450px']   //宽  高
	        ,title: shopFlagNo+' 号热法纺丝线巡检项'
	        ,shade: 0.6 				//遮罩透明度
	        ,maxmin: true 			    //允许全屏最小化
	        ,anim: 1 					//0-6的动画形式，-1不开启
	        ,content: '<table class="layui-hide" id="tableList" lay-filter="tableList"></table>'
	        /* ,content: $('#tableList') */
	        ,success: function(){
	            layui.use(['table'], function() {
	                var table = layui.table;
	                table.render({
	                    elem: '#tableList'
	                    ,url:'${pageContext.request.contextPath }/processItem/queryProcessItemFlag2.do'
	                    /*,where:{dId:thisRowId.id}*/
	                    /*,toolbar: '#toolbar'*/
	                    ,title: '维护维修项详细'
	                    ,id :'contenttable'
	                    ,limits:[10,20,30]
	                    ,cols: [[
	                        /*{type: 'checkbox', fixed: 'left'},*/
                            {field:'id', title:'序号', fixed: 'left', unresize: true, sort: true, type:'numbers', width: 60},
	                        {field:'processItemName', title:'工艺巡检项', align: 'center'},
	                        {unresize: true, title:'操作', toolbar: '#rowToolbar', align: 'center'}
	                    ]]
	                    ,page: false
	                });
	            });
	        }
	    });
	});
}

//2#纺丝车间实时状态登记
function lookupShopInfo2(shopFlagNo) {
    $("#hideVal").val(shopFlagNo);
    //alert('您点击了'+deviceFlagNo+'号离心机');
    /* —————————————————————————————————— */
    layui.use(['table','layer','upload','form','laydate'], function(){
        if (shopFlagNo == '31') {
            shopFlagNo = '1'
        } else {
            shopFlagNo = '2'
        }
        var layer = layui.layer;
        layer.open({
            type: 1 					//Page层类型
            ,area: ['500px', '450px']   //宽  高
            ,title: shopFlagNo+' 号湿法纺丝线巡检项'
            ,shade: 0.6 				//遮罩透明度
            ,maxmin: true 			    //允许全屏最小化
            ,anim: 1 					//0-6的动画形式，-1不开启
            ,content: '<table class="layui-hide" id="tableList" lay-filter="tableList"></table>'
            /* ,content: $('#tableList') */
            ,success: function(){
                layui.use(['table'], function() {
                    var table = layui.table;
                    table.render({
                        elem: '#tableList'
                        ,url:'${pageContext.request.contextPath }/processItem/queryProcessItemFlag2.do'
                        /*,where:{dId:thisRowId.id}*/
                        /*,toolbar: '#toolbar'*/
                        ,title: '维护维修项详细'
                        ,id :'contenttable'
                        ,limits:[10,20,30]
                        ,cols: [[
                            /*{type: 'checkbox', fixed: 'left'},*/
                            {field:'id', title:'序号', fixed: 'left', unresize: true, sort: true, type:'numbers', width: 60},
                            {field:'processItemName', title:'工艺巡检项', align: 'center'},
                            {unresize: true, title:'操作', toolbar: '#rowToolbar', align: 'center'}
                        ]]
                        ,page: false
                    });
                });
            }
        });
    });
}

//提示框样式
function toastrStyle(){
    toastr.options = {
        "closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-center",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "5000",
        "hideDuration": "1000",
        "timeOut&quot": "100000",
        "extendedTimeOut": "0",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
}

/*var cvs01 = document.getElementById('myCanvas01');
var ctx01 = cvs01.getContext('2d');
//缩放当前绘图，更大或更小
ctx01.scale(1, 0.5);
ctx01.arc(140, 180, 100, 0, Math.PI * 2);
ctx01.fillStyle="#00CD66";
ctx01.font="20px 微软雅黑";
ctx01.fillText("1#纺丝车间",80,330);
ctx01.fill();

var cvs02 = document.getElementById('myCanvas02');
var ctx02 = cvs02.getContext('2d');
//缩放当前绘图，更大或更小
ctx02.scale(1, 0.5);
ctx02.arc(100, 140, 100, 0, Math.PI * 2);
ctx02.fillStyle="#00CD66";
ctx02.font="20px 微软雅黑";
ctx02.fillText("2#纺丝车间",35,300);
ctx02.fill();*/

</script>
</body>
</html>